import React, { PureComponent, Suspense, lazy } from 'react'
import './index.scss'
import { Link, withRouter, Route, Redirect } from "react-router-dom";
import MyNavLink from '../MyNavLink/index'
import Loading from "../Loading/Loading";
import { connect } from 'react-redux'



const Hot = lazy(() => import('../../Movie/Hot/Hot'))
const Wait = lazy(() => import('../../Movie/Wait/Wait'))
const Cinema = lazy(() => import('../../Movie/Cinema/Cinema'))

class Head extends PureComponent {
    state = {
        cityName: '广州'
    }

    goCity = () => {
        this.props.history.push('/city')
    }
    render() {
        // console.log(this.props);
        let { cityName } = this.props
        return (
            <>
                <div className="head">
                    <p className="hp">猫眼电影</p>
                    <div className="content">
                        <div className="cshi" onClick={this.goCity}>
                            <div className='myLink'>{cityName}<span className="sanj"></span></div>
                        </div>
                        <ul>
                            <li>
                                <MyNavLink to="/app/movie/hot">热映</MyNavLink>
                            </li>
                            <li>
                                <MyNavLink to="/app/movie/wait">待映</MyNavLink>
                            </li>
                            <li>
                                <MyNavLink to="/app/movie/cinema">经典影院</MyNavLink>
                            </li>
                        </ul>
                        <div>
                            <Link to="/search" className="ssuo">
                                <img className='img' src={require('../../../assets/search-red.png')} alt="" />
                            </Link>
                        </div>
                    </div>
                </div>
                <Suspense fallback={<Loading />}>
                    <Route path='/app/movie' exact render={() => (
                        <Redirect to="/app/movie/hot" />
                    )} />
                    <Route path="/app/movie/hot" component={Hot} />
                    <Route path="/app/movie/wait" component={Wait} />
                    <Route path="/app/movie/cinema" component={Cinema} />
                </Suspense>
            </>
        )
    }
}
export default connect(
    state => ({
        cityName: state.city[state.city.length - 1]
    }),
    {}
)(withRouter(Head))